<template>
  <div style="display: flex; margin: 0.1rem; text-align: center;">

    <el-card shadow="hover" class="box-card m-0.5" v-if="true">
      <div style="width: 360px;height: 250px;">
        <v-chart :option="options[0]" />
      </div>
    </el-card>
    <el-card shadow="hover" class="box-card m-0.5" v-if="true">
      <div style="width: 360px;height: 250px;" v-if="true">
        <v-chart :option="options[1]" />
      </div>
    </el-card>
    <el-card shadow="hover" class="box-card m-0.5">
      <div style="width: 360px;height: 250px;" v-if="true">
        <v-chart :option="options[2]" />
      </div>
    </el-card>
  </div>
  <div style="display: flex">
    <el-card shadow="hover" class="box-card m-0.5" v-if="true">
      <div style="width: 360px;height: 250px;">
        <v-chart :option="options[3]" />
      </div>
    </el-card>
    <el-card shadow="hover" class="box-card m-0.5" v-if="true">
      <div style="width: 360px;height: 250px;">
        <v-chart :option="options[4]" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from 'echarts/components';
import { PieChart } from 'echarts/charts';
import VChart from 'vue-echarts';
import { ref } from 'vue';

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);


// import Pie_temp from './view/Pie_temp.vue';
// import {getLiuLiang2} from '../../api/test'
import { getLiuLiang2 } from '../../api/base'


// 当前列数
const outer = defineProps(["table_index"])
// console.log('outer', outer.table_index)

// 将数据计算得到出现的次数并转为直接可传入echarts的option数据
function data_to_Opion(_data) {
  const frequency = {};
  for (const index in _data) {
    const element = _data[index];
    if (frequency[element]) {
      frequency[element] += 1;
    } else {
      frequency[element] = 1;
    }
  }
  const _op_data = [];
  for (const key in frequency) {
    _op_data.push({ name: key, value: frequency[key] });
  }
  return _op_data;
}

function deepClone(source) {
  // 针对基本数据类型
  if (typeof source !== "object" || source === null) {
    return source;
  }
  // 判断它是数组还是对象
  // 或者 let target = source instanceof Array ? [] : {}
  let target = Array.isArray(source) ? [] : {};
  // 循环遍历复制每个属性
  for (let prop in source) {
    // 自有属性才做拷贝
    if (Object.hasOwnProperty.call(source, prop)) {
      // 判断自有属性是否是对象
      target[prop] =
        typeof source[prop] === "object"
          ? deepClone(source[prop])
          : source[prop];
    }
  }
  return target;
}


const prep_option = ref({
  title: {
    text: '数据情况统计',
    left: 'right',
    textStyle: {
      color: '#000',
      fontSize: 12
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c} ({d}%)',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: [],
    //  ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
    textStyle: {
      color: '#000',
      fontSize: 10
    },
  },

  series: [
    {
      // name: 'Traffic Sources',
      type: 'pie',
      radius: '65%',
      avoidLabelOverlap: true,
      // center: ['60%', '50%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 234, name: 'Ad Networks' },
        { value: 135, name: 'Video Ads' },
        { value: 1548, name: 'Search Engines' },
      ],
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
});
const detailData = ref([]);
const titles = ref([]);
const options = ref([]);
// const legendData = ref([]);
getLiuLiang2(outer.table_index).then(res => {
  console.log('user_detail_res', res)
  let resdata = res.data
  titles.value = Object.keys(resdata)
  // console.log('titles', titles.value)
  detailData.value = Object.values(resdata).map(data_to_Opion)
  // legendData.value = deepCopy(Object.values(res.data.data))
  // console.log('detailData', detailData.value)
}).then(() => {
  let opt = {};
  for (let i = 0; i < titles.value.length; i++) {
    opt = deepClone(prep_option.value);
    opt.series[0].data = detailData.value[i];
    opt.title.text = titles.value[i];
    // opt.legend.data = detailData.value[i].map(obj=>obj.name.substring(0,20));
    // console.log(`title.value[${i}]`, titles.value[i])
    // console.log(`opt[${i}]`, opt)
    options.value.push(opt)
  }
});


// getLiuLiang2(3).then(res => {
//   console.log('刘亮3', res.data.data)
//   detailData.value = res.data.data
// });
</script>